<template>
  <div class="main">
    <div class="dh">
      <van-nav-bar>
        <template #left>
          <img
            @click="onClickLeft"
            class="img1"
            src=""
            alt=""
          />
        </template>
      </van-nav-bar>
    </div>
    <!-- 轮播图 -->
    <div class="slide">
      <van-swipe
        @change="onChange"
        :touchable="ischecked"
        :show-indicators="show_data"
      >
        <van-swipe-item v-for="(item, index) in arrimg" :key="index">
          <img class="swiper-slide" :src="item" />
        </van-swipe-item>
      </van-swipe>
      <div class="swiper-pagination">
        <span class="swiper-pagination-current">{{ num + 1 }}</span>
        <span>/</span>
        <span class="swiper-pagination-total">{{ sum }}</span>
      </div>
    </div>
    <!-- 价格详情 -->
    <div class="buy_area new_ver" id="buyArea">
      <div class="title_price_warp">
        <div class="price_main">
          <span class="price">
            ￥
            <em>4.9</em>
          </span>
          <div class="shop">
            <div class="shop1">
              <van-icon name="shop-o" size="1.2rem" />
              <span>收藏</span>
            </div>
            <div class="shop1">
              <van-icon name="share-o" size="1.2rem" />
              <span>分享</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 描述 -->
      <div class="fn_text_container">
        麦香味老式手撕面包营养早餐面包整箱批发零食 1袋装【试吃装12块】
      </div>
      <div class="market_benefit">
        <div class="market_benefit_desc">
          <img
            class="icon"
            src="https://img12.360buyimg.com/img/s30x30_jfs/t1/136495/3/13218/1119/5f90fbafEbb25875d/d99b4c8ac099ceb6.png"
            alt
          />
          <span>90天最低价</span>
        </div>
      </div>
      <van-cell
        class="tit"
        title="商家发货&售后 7天无理由退货 48小时发货 闪电退款"
        is-link
      />
    </div>
    <!-- 拼团 -->
    <div class="tuan">
      <div class="tuan_head">
        <div class="tuan_head_left">
          <i class="tuan_head_icon"></i>
          "2人拼，可直接参与"
        </div>
        <div class="tuan_head_right">1.2万人已拼</div>
      </div>
      <div class="tuan_list">
        <ul id="tuanRecommendUl">
          <li class="item">
            <div class="header_wrap">
              <img
                class="header"
                src="https://wq.360buyimg.com/img/pingou-head/128.jpg"
                alt
              />
            </div>
            <div class="content">
              <p class="title">
                <span>陈女士1</span>
                的团
              </p>
              <p class="text">
                还差
                <em>1</em>
                人成团
                <small class="remain_time">
                  <van-count-down
                    class="time"
                    millisecond
                    :time="time"
                    format="HH:mm:ss:SS"
                  ></van-count-down>
                </small>
              </p>
            </div>
            <div class="btn" @click="onClickButton()">去参团</div>
          </li>
          <li class="item">
            <div class="header_wrap">
              <img
                class="header"
                src="https://wq.360buyimg.com/img/pingou-head/94.jpg"
                alt
              />
            </div>
            <div class="content">
              <p class="title">
                <span>12345</span>
                的团
              </p>
              <p class="text">
                还差
                <em>1</em>
                "人成团"
                <small class="remain_time">
                  <van-count-down
                    class="time"
                    millisecond
                    :time="time"
                    format="HH:mm:ss:SS"
                  />
                </small>
              </p>
            </div>
            <div class="btn" @click="onClickButton()">去参团</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 列表 -->
    <div class="liebiao">
      <van-cell center title="已选" is-link value="1袋装 【试吃装12快】,1件" />
      <van-cell center title="送至" is-link value="北京朝阳区三环到四环之间" />
      <van-cell title="运费" is-link value="在线支付免运费" />
    </div>
    <!-- 攻略 -->
    <div class="gl">
      <van-cell
        center
        title="攻略"
        is-link
        value="开团后邀请好友参团，人满发货，不满退款"
      />
    </div>
    <div class="pj">
      <van-cell center title="评价" is-link value="(1万+，96%好评度) " />
      <span class="all">查看全部</span>
    </div>
    <div class="pinglun">
      <van-button round type="info" size="small">漂亮好看(21)</van-button>
      <van-button round type="info" size="small">做工精良(19)</van-button>
      <van-button round type="info" size="small">香甜可口(12)</van-button>
      <van-button round type="info" size="small">松软可口(7)</van-button>
      <van-button round type="info" size="small">分量充足(6)</van-button>
      <van-button round type="info" size="small">嚼味十足(4)</van-button>
    </div>
    <div class="cmt_user">
      <img
        src="//img11.360buyimg.com/jdphoto/s40x40_jfs/t1/25255/18/10701/1678/5c89f892E78c04688/684d63c0d68e39b1.png"
        alt
      />
      <span class="user">j***b</span>
      <span class="credit star-five">
        <span></span>
      </span>
      <span class="date">2020-12-29</span>
    </div>
    <div class="mb">
      <p>
        千丝全麦夹心吐司面包，软糯香甜，超级好吃，物美价廉，太便宜了，受到大家的欢迎，物流快，服务好，再次追加五星好评，点赞
      </p>
    </div>
    <div class="cmt_att">
      <span class="img">
        <img
          src="//img30.360buyimg.com/shaidan/s128x96_jfs/t1/159680/31/304/91222/5feabda5Eb194ee2a/d76fea1504fe3986.jpg!cc_100x100!q70.dpg.webp"
          alt
        />
      </span>
      <span class="img">
        <img
          src="//img30.360buyimg.com/shaidan/s128x96_jfs/t1/159680/31/304/91222/5feabda5Eb194ee2a/d76fea1504fe3986.jpg!cc_100x100!q70.dpg.webp"
          alt
        />
      </span>
      <span class="img">
        <img
          src="//img30.360buyimg.com/shaidan/s128x96_jfs/t1/159680/31/304/91222/5feabda5Eb194ee2a/d76fea1504fe3986.jpg!cc_100x100!q70.dpg.webp"
          alt
        />
      </span>
      <span class="img">
        <img
          src="//img30.360buyimg.com/shaidan/s128x96_jfs/t1/159680/31/304/91222/5feabda5Eb194ee2a/d76fea1504fe3986.jpg!cc_100x100!q70.dpg.webp"
          alt
        />
      </span>
    </div>
    <div class="answer">
      <van-cell center title="问答" is-link value="查看全部" />
    </div>
    <div class="show">
      <van-cell class="question" title="500g一箱有多少个" icon="location-o" />
      <van-cell class="question" title="有没有人拼个团啊" icon="location-o" />
    </div>
    <div class="stor">
      <img src="@/assets/img/1.png" width="102%" alt />
    </div>
    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          class="tubiao1"
          color="#ffad08"
          type="warning"
          text="￥4.9 单独购买"
          @click="onClickButton"
        />
        <van-goods-action-button
          class="tubiao"
          color="##ff4b2b"
          type="danger"
          text="￥1 我要开团"
          @click="onClickButton"
        />
      </van-goods-action>
    </div>
    <div class="like">
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="item in like" :key="item.id">
          <van-image :src="item.href" @click="onClick" />
          <span>短外套女风衣女夹克</span>
          <span>￥85</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
 
<script>
import Vue from "vue";

import {
  Swipe,
  SwipeItem,
  Icon,
  Cell,
  CellGroup,
  Button,
  GoodsAction,
  GoodsActionButton,
  GoodsActionIcon,
  CountDown,
  Grid,
  GridItem,
  Image,
  NavBar,
} from "vant";
Vue.use(NavBar);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Icon);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(CountDown);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Image);

export default {
  data() {
    return {
      arrimg: [
        "//m.360buyimg.com/mobilecms/s843x843_jfs/t1/124590/20/16768/99619/5f9d83b4Ec01a139d/4ebecc13a62efc8d.jpg!q70.dpg.webp",
        "//m.360buyimg.com/mobilecms/s843x843_jfs/t1/133040/39/14275/56359/5f9d83b3E9807375f/a5255833742fc7d1.jpg!q70.dpg.webp",
        "//m.360buyimg.com/mobilecms/s843x843_jfs/t1/127489/11/16697/94174/5f9d83b4Efb08cbb5/bef529f217309fe4.jpg!q70.dpg.webp",
        "//m.360buyimg.com/mobilecms/s843x843_jfs/t1/124590/20/16768/99619/5f9d83b4Ec01a139d/4ebecc13a62efc8d.jpg!q70.dpg.webp",
        "//m.360buyimg.com/mobilecms/s843x843_jfs/t1/129489/35/16970/79635/5f9d83b5Ec660b519/216db30aeb30bf61.jpg!q70.dpg.webp",
        "//m.360buyimg.com/mobilecms/s843x843_jfs/t1/123953/2/16914/78252/5f9d83b5E1b80aec8/7071d33d74316ac7.jpg!q70.dpg.webp",
        "//m.360buyimg.com/mobilecms/s843x843_jfs/t1/127306/16/16849/85170/5f9d83b6E896e3cb8/d946e7ba2be6e0ec.jpg!q70.dpg.webp",
      ],
      //轮播图的属性
      ischecked: true,
      //轮播图绑定的属性
      show_data: false,
      //轮播图的当前页索引
      num: "",
      //倒计时
      time: 30 * 60 * 60 * 1000,
      //信息源
      message: {},
      // 最底下的图片列表
      like: [],
      //轮播图数组长度
      sum: "",
      dataId: "",
    };
  },
  created() {
    // console.log(111);
    this.$store.commit("setIsShow", false);
    this.sum = this.arrimg.length;
    this.dataId = this.$route.params.id;
    // console.log(this.dataId)
    this.$http
      .get(
        "https://www.fastmock.site/mock/b2f584f37a59c340f74cfbd834be25ff/fenlei1/all" +
          "?id=" +
          this.dataId
      )
      .then((ret) => {
        //最底下的图片列表
        // console.log(ret.data)
        this.like = ret.data.slice(0, 9);
        //  console.log(ret.data)
        ret.data.forEach((item) => {
          //  console.log(item)
          if (item.id === this.dataId) {
            // this.message = item;
            //  console.log(item)
            this.arrimg[0] = item.href;
          }
        });
      });
  },
  beforeDestroy() {
    this.$store.commit("setIsShow", true);
    // console.log(222);
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onChange(index) {
      // console.log(index);
      this.num = index;
    },
    //点击提交事件
    onClickButton() {
      // console.log("点击按钮");
      this.$router.push("/cart/" + this.dataId);
    },
    //最底部的图片点击事件
    onClick(event) {
      // console.log(event.path[0].src)
      this.arrimg.unshift(event.path[0].src);
      // console.log(this.arrimg)
      this.arrimg = this.arrimg.splice(0, 7);
      // this.arrimg[0]=event.path[0].src
      // console.log(this.arrimg)
      window.scrollTo(0, 0);
    },
  },
};
</script>

<style scoped>
.slide {
  position: relative;
  height: 375px;
  width: 375px;
}
.slide img {
  width: 100%;
}
.main {
  height: 100%;
  width: 100%;
  background-color: #eee;
}
html,
body {
  height: 100%;
  background-color: black;
}

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;

  margin: 0;
  padding: 0;
}
.main .dh {
  position: absolute;
  left: 0;
  top: 0;
  background-color: transparent;
}
.img1 {
  height: 25px;
  width: 25px;
}

.swiper-pagination {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: 15px;
  height: 20px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px 0 0 10px;
  font-size: 15px;
  color: #fff;
  line-height: 20px;
  font-family: JDZH-Regular;
}
.swiper-pagination .swiper-pagination-current {
  font-weight: 350;
  font-size: 16px;
}

/* 价格详情 */
.buy_area {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
  background: #fff;
  height: 171px;
  padding: 0 0 0 10px;
}
.title_price_warp {
  height: 50px;
  background-color: #fff;
}

.title_price_warp .price {
  display: block;
  padding-top: 5px;
  font-size: 16px;
  line-height: 1;
  color: #ff4142;
  vertical-align: middle;
  margin-right: 5px;
}
.price em {
  font-size: 32px;
  height: 32px;
  line-height: 32px;
}
.price_main {
  display: flex;
  justify-content: space-between;
}
.price_main .shop {
  display: flex;
}
.shop .shop1 {
  display: flex;
  flex-direction: column;

  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
.shop .shop1 span {
  font-size: 12px;
}
/* 描述 */
.fn_text_container {
  color: #333;
  overflow: hidden;
  font-size: 16px;

  padding-right: 10px;
  font-weight: 700;
  line-height: 24px;
}
/* 90天 */
.market_benefit {
  height: 20px;
  line-height: 20px;
  margin-top: 8px;

  flex-wrap: wrap;
  overflow: hidden;
}
.market_benefit_desc .icon {
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.market_benefit_desc span {
  display: block;
  align-items: center;
  margin-left: 24px;
  font-size: 13px;
  color: #fd5254;
  margin-top: -21px;
}
.tit {
  font-size: 12px;
  color: #999;
}
/* 拼团 */
.tuan {
  margin-top: 10px;
  height: 164px;
  background: #fff5ea;
}
.tuan_head {
  padding: 15px 10px;
  height: 15px;
  line-height: 1;
  color: #ff911b;
  font-size: 14px;
  position: relative;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.tuan_head_left {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.tuan_head_icon {
  margin-right: 5px;
  width: 15px;
  height: 15px;
  background-image: url();
  background-size: cover;
}
.tuan_head:after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-color: #ff911b;
  height: 1px;
  left: 0;
  right: 0;
  bottom: 0;
  left: 10px;
}
.tuan_list {
  height: 120px;
  background-color: #fff;
}
.tuan_list .item {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
.tuan_list .item .header_wrap {
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  overflow: hidden;
}
.tuan_list .item .header {
  display: block;
  width: 100%;
  height: auto;
}
.tuan_list .content {
  display: flex;
  flex: 1;
  align-items: center;
  -webkit-box-align: center;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.tuan_list .item .title {
  font-size: 14px;
  color: #333;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.tuan_recommend .item .title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tuan_list .item .text {
  font-size: 12px;
  color: #333;
  text-align: right;
  margin-left: 5px;
}
.tuan_list .item .text em {
  color: #ff4142;
}
.tuan_list .item .text small {
  display: flex;
  flex-direction: row;
  font-family: Helvetica;
  display: block;
  font-size: 10px;
  color: #999;
  line-height: 1;
}
.tuan_list .item .btn {
  margin-left: 10px;
  width: 86px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    from(#ff4142),
    to(#ff4b2b)
  );
  background-image: -webkit-linear-gradient(right, #ff4142, #ff4b2b);
  background-image: linear-gradient(270deg, #ff4142, #ff4b2b);
  border-radius: 15px;
}
.title {
  margin-right: 31px;
}
.van-cell__value {
  /* -webkit-box-flex: 1; */
  /* -webkit-flex: 1; */
  flex: 5;
  text-align: left;
}
.liebiao {
  margin-top: 15px;
  margin-bottom: 15px;
}
.gl {
  margin-bottom: 15px;
}
.pj {
  position: relative;
}
.pj .all {
  position: absolute;
  top: 10px;
  right: 36px;
  color: #999;
  font-size: 12px;
  line-height: 24px;
}
.pinglun {
  background-color: #fff;
}
.van-button {
  color: #333;
  background-color: #fdf0f0;
  font-size: 12px;
  border: 0px;
  margin: 5px 5px 5px 10px;
}

.cmt_user {
  padding-top: 5px;
  line-height: 25px;
  padding-left: 6px;
  background-color: #fff;
  font-size: 12px;
}
.cmt_user img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  vertical-align: middle;
  border: 0;
}
.cmt_user .user {
  margin-left: 10px;
  display: inline-block;
  color: #333;
  max-width: 8.2em;
  vertical-align: middle;
}
.cmt_user .credit {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 10px;
  margin: -2px 0 -2px 5px;
  vertical-align: middle;
}
.cmt_user .date {
  float: right;
  color: #999;
  margin-left: -60px;
  font-size: 12px;
}
.cmt_user .credit {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 10px;
  margin: -2px 0 -2px 5px;
  vertical-align: middle;
}
.cmt_user .credit span {
  width: 10px;
  height: 10px;
  margin-right: 1px;
  position: absolute;
  top: 0;
  left: 22px;
  background-size: cover;
  background-image: url();
}
.cmt_user .credit.star-five:before,
.cmt_user .credit span:before,
.cmt_user .credit span:after,
.cmt_user .credit:after {
  background-image: url();
  display: inline-block;
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  margin-right: 1px;
  background-size: cover;
}
.cmt_user .credit.star-five:before {
  left: 0;
}
.cmt_user .credit span:before {
  left: -11px;
}
.cmt_user .credit span:after {
  right: -12px;
}
.cmt_user .credit:after {
  right: 0;
}
.mb {
  padding-top: 2px;
  background-color: #fff;
  padding-left: 8px;
  margin-bottom: -4px;
}
.mb p {
  line-height: 1.5;
  font-size: 14px;
  margin: 5px 0;
}

.cmt_att {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  overflow-x: auto;
  margin-right: -10px;
  padding-bottom: 4px;
  padding-left: 5px;
  background-color: #fff;
}
.cmt_att .img {
  display: inline-block;
  margin-top: 8px;
  margin-left: 5px;
  width: 80px;
  height: 80px;
  margin-right: 6px;
  margin-bottom: 5px;
  border-radius: 6px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  background-color: #f3f3f3;
  background-image: url(https://img12.360buyimg.com/img/s160x160_jfs/t1/140315/13/19415/1341/5fe188acEffe10d6f/09c4662be6993a6d.png);
  background-size: cover;
}
.answer {
  margin-top: 10px;
}
.answer .van-cell__value {
  text-align: right;
}
.show {
  position: relative;
}
.stor {
  margin-top: 10px;
}
.tubiao1 {
  font-size: 14px;
  border-radius: 20px;
  margin-right: 5px;
}
.tubiao {
  font-size: 14px;
  border-radius: 20px;
  margin-right: 15px;
}
.like {
  margin-bottom: 50px;
  background-color: #999;
}
.like span {
  display: block;
  margin-top: 10px;
  font-size: 13px;
}
.like span:nth-child(3) {
  color: #fd5254;
  font-weight: 400;
  font-size: 16px;
}
.van-goods-action {
  z-index: 9999;
}
</style>
